<template>
  <div>
    <!--    1. 热歌榜图片-->
    <div class="info">
      <img src="@/assets/images/hot_music_bg_2x.jpg" width="100%"/>
    </div>
    <!--    2. 热歌列表-->
    <MusicList :list="list" :is-show="false">
      <template v-slot:code="obj">
        <div class="code" :class="{'code-red':obj.index<3}">{{ obj.index > 8 ? obj.index + 1 : '0' + (obj.index + 1) }}</div>
      </template>
    </MusicList>
<!--    <div class="list" v-for="(item,index) in list" :key="item.id">-->
<!--      <div class="list-item">-->
<!--        <div class="code" :class="{'code-red':index<3}">{{ index > 9 ? index : '0' + (index + 1) }}</div>-->
<!--        <div class="left">-->
<!--          <div class="subtitle">{{ item.name }} <span>{{ item.alia[0] }}</span></div>-->
<!--          <div class="author">-->
<!--               <span v-for="ele in item.ar" :key="ele.id" class="ele">-->
<!--                 {{ ele.name }}-->
<!--              </span>-->
<!--            - {{ item.al.name }}-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="right">aa</div>-->
<!--      </div>-->
<!--    </div>-->
  </div>
</template>
<script>
import MusicList from '@/components/MusicList.vue'
import index from 'vuex'
export default {
  computed: {
    index () {
      return index
    }
  },
  components: {
    MusicList
  },
  data () {
    return {
      list: [], //音乐列表数据
    }
  },

  created () {
    this.getPlayList()
  },
  methods: {
    //获取热歌榜数据-----
    async getPlayList () {
      let res = await this.$api.getPlayList()
      console.log('获取热歌榜数据', res.data.playlist.tracks)
      this.list = res.data.playlist.tracks
    }
  }
}
</script>
<style scoped lang="less">
.list {
  display: flex;

  .code {
    width: .9rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
  }

  .code-red {
    color: #df3436;
  }
}

//最新音乐
.list-item {
  border-bottom: 1px solid #eee;
  font-size: 17px;
  padding-top: 6px;
  padding-bottom: 6px;
  display: flex;
  flex: 1;

  .code {
    width: .9rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .left {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: normal;
  }

  .right {
    width: .9rem;
  }

  .subtitle {
    font-size: 17px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: normal;

    span {
      //font-size: 12px;
      color: #888;
    }


    .subtitle {
      font-size: 17px;

      span {
        font-size: 12px;
        color: #888;
      }
    }
  }

  .author {
    margin-top: 4px;
    font-size: 14px;
    color: #888;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: normal;

    .ele {
      &::after {
        content: '/';
      }
    }

    .ele:last-child {
      &::after {
        content: '';
      }
    }
  }
}
</style>
